<template>
  <view class="common-card f_row_center">
    <view v-for="(item,ind) in list" :key="ind" class="flex_1 f_column_center">
      <view style="font-size: 24rpx;color: #666666;margin-bottom: 16rpx">{{ item.title }}</view>
      <image :src="item.img" style="height: 100rpx;width: 100rpx"/>
      <view style="color: #3F77F4;font-size: 30rpx">{{ item.content }}
        <span style="font-size: 24rpx">{{ item.unit }}</span>
      </view>
    </view>
  </view>
</template>

<script lang="ts">
import {Vue, Component, Prop, Watch} from "vue-property-decorator";
import BaseApi from "@/api/BaseApi";
import ApiDefine from "@/api/ApiDefine";

@Component({
  components: {}
})
export default class HouseCardView extends Vue {
  list = [
    {
      title: '总楼栋数',
      img: '/static/zds.png',
      content: '0',
      unit: '',
      key: 'totalbuild'
    },
    {
      title: '总建筑面积',
      img: '/static/zjzmj.png',
      content: '0',
      unit: '㎡',
      key: 'zjzarea'
    },
    {
      title: '总占地面积',
      img: '/static/zzdmj.png',
      content: '0',
      unit: '㎡',
      key: 'zzdarea'
    },
  ];

  @Prop() info?: any;

  created() {
    // this.initData();
  }

  // info:any = {};

  @Watch('info')
  infoChange() {
    this.setList();
  }

  setList() {
    this.list.forEach((item: any) => {
      item.content = this.info[item.key] ?? '';
    })
    console.log(this.list, ">>")
  }

}
</script>

<style scoped>

</style>
